<nz-card>
  <form nz-form [nzLayout]="'inline'" class="search__form">
    <nz-row [nzGutter]="8">
      <nz-col nzMd="5" nzSm="24">
        <nz-form-item>
          <!--<nz-form-label nzFor="brand">SKU</nz-form-label>-->
          <nz-form-control>
            <input type="text" nz-input placeholder="{{'input_sku' | translate}}" [(ngModel)]="q.sku" name="sku">
          </nz-form-control>
        </nz-form-item>
      </nz-col>
      <nz-col nzMd="5" nzSm="24">
        <nz-form-item>
          <!--<nz-form-label nzFor="userGroup">SAP</nz-form-label>-->
          <nz-form-control>
            <input type="text" nz-input placeholder="{{'input_sap' | translate}}" [(ngModel)]="q.sap" name="sap">
          </nz-form-control>
        </nz-form-item>
      </nz-col>
      <nz-col nzMd="5" nzSm="24">
        <nz-form-item>
          <!--<nz-form-label nzFor="brand">品牌</nz-form-label>-->
          <nz-form-control>
            <nz-select nzPlaceHolder="{{'all_brands' | translate}}" nzAllowClear [(ngModel)]="q.brand" name="brand">
              <nz-option [nzLabel]="brand.text" [nzValue]="brand.value" *ngFor="let brand of brands"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </nz-col>
      <nz-col nzMd="3" nzSm="24">
        <!--<button nz-button type="button" [nzLoading]="http.loading" [nzType]="'primary'" class="mx-sm" (click)="se()">{{'search' | translate}}</button>-->
        <button (click)="onScroll(false)" nz-button nzType="primary" nzSearch>{{'search' | translate}}</button>
      </nz-col>
    </nz-row>
  </form>
</nz-card>

<nz-card>
  <div nz-row [nzGutter]="{ xs: 16, sm: 16, md: 16, lg: 16, xl: 16, xxl: 16 }">
    <div nz-col nzXs="6" nzSm="4" nzMd="3" nzLg="2" *ngFor="let pop of list"
         style="min-width:228.75px;max-width:257px;margin-bottom: 8px">
      <div class="ibox" style="background-color: white">
        <div class="ibox-content product-box">
          <div class="product-imitation lanren">
            <div style="min-height:132.28px; max-height:132.28px; text-algin: center; " *ngIf="pop.img">
              <a><img style="min-height:132.28px; max-height:132.28px;" (click)="view(pop)" alt="example" [src]="imgSuffix + pop.img"/></a>
            </div>
            <a (click)="view(pop)">
            <div style="min-height:132.28px; max-height:132.28px; text-algin: center; background-color: #e9e9e9" *ngIf="!pop.img">
              <div style="font-size: 22px; text-algin: center; padding-top: 22%">
                {{'no_image' | translate}}
              </div>
            </div>
            </a>
          </div>
          <div class="product-desc">
            <div class="product-price">
              {{pop.netWeight!=null?pop.netWeight:' '}}kg
            </div>
            <div class="prodattr">
              {{pop.brand != null ? pop.brand :"No Brand " }}</div>
            <a href="javascript:void(0)" (click)="view(pop)"  class="product-name">{{pop.sap!=null?pop.sap:' '}}</a>
            <!--<div class="prodattr">{{(pop.description!='')?pop.description:''}}</div>-->
            <div>
              <small class="text-truncate prodtitle">Sku: <span class="prodattr">{{pop.sku!=null?(pop.sku.length>17?pop.sku.substring(0,16)+'...':pop.sku):' '}}</span></small>
            </div>
            <div>
              <small class="text-truncate prodtitle">Exw: <span class="prodattr">${{pop.exw!=null?pop.exw:' '}}</span></small>
            </div>
            <!--<div>-->
              <!--<small class="text-truncate prodtitle">cif: <span class="prodattr">${{pop.cif!=null?pop.cif:' '}}</span></small>-->
            <!--</div>-->
            <div style="padding: 5px 0px;">
              <nz-button-group *ngIf="addBtn">
                <button nz-button (click)="minCount(pop)"><i class="anticon anticon-minus"></i></button>
                <button nz-button (click)="addCount(pop)"><i class="anticon anticon-plus"></i></button>
              </nz-button-group>

              <nz-badge *ngIf="cartBtn" [nzOverflowCount]="9999" [nzCount]="pop['cart']" style="float: right;">
                <nz-dropdown nzTrigger="click" [nzPlacement]="'topCenter'" nzClickHide="false">
                  <a nz-dropdown>
                    <i class="anticon anticon-shopping-cart" style="font-size: 28px;"></i>
                  </a>
                  <div nz-menu>
                    <div nz-menu-item>
                      <nz-input-number (ngModelChange)="modifyCart(pop, $event)" [nzSize]="'small'"
                                       [(ngModel)]="pop.cart" [nzMin]="0" [nzStep]="1"></nz-input-number>
                    </div>
                  </div>
                </nz-dropdown>
              </nz-badge>
            </div>

          </div>
        </div>

      </div>
    </div>
  </div>
</nz-card>
<!--<div nz-row>-->
  <!--<div nz-col [nzSpan]="6"></div>-->
  <!--<div nz-col [nzSpan]="6"></div>-->
  <!--<div nz-col [nzSpan]="6"></div>-->
  <!--<div nz-col [nzSpan]="6">-->
    <!--<nz-pagination [(nzPageIndex)]="q.pageNumber" [(nzTotal)]="total" [(nzPageSize)]="q.pageSize" (nzPageIndexChange)="se()"></nz-pagination>-->
  <!--</div>-->
<!--</div>-->
<div *ngIf="hasMore" class="loadmore">
  <button nz-button *ngIf="!loading" (click)="onScroll(true)">loading more</button>
  <nz-spin *ngIf="loading && hasMore" [nzSpinning]="loading"></nz-spin>
</div>

<!--POP套餐详情抽屉-->
<nz-drawer id="drawer" [nzVisible]="visible" [nzWidth]="640" [nzClosable]="false" (nzOnClose)="close()">
  <p class="title" style=" margin-bottom: 24px;">
    <nz-tag [nzColor]="'magenta'" >SKU:</nz-tag>
    {{popDto.sku}}
  <p class="title" style=" margin-bottom: 24px;">
    <nz-tag [nzColor]="'magenta'" >SAP:</nz-tag>
    {{popDto.sap}}
    <!--<nz-tag [nzColor]="'gold'" *ngIf="popDto.isCm === '1'">Rx</nz-tag>-->
    <!--<nz-tag [nzColor]="'blue'">{{popDto.brandLine}}</nz-tag>-->
    <!--<nz-tag *ngIf="popDto.eanCode" [nzColor]="'purple'">{{popDto.eanCode}}</nz-tag>-->
  </p>
  <nz-divider nzText="Basic Info" nzOrientation="left" ></nz-divider>
  <div nz-row>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">Description:</p> {{popDto.description}}
      </div>
    </div>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">Brand:</p> {{popDto.brand | brandEnPipe | uppercase}}
      </div>
    </div>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">Qty:</p> {{popDto.qty}}
      </div>
    </div>
  </div>
  <div nz-row>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">Exw:</p>{{popDto.exw}}
      </div>
    </div>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">CIF:</p> {{popDto.cif}}
      </div>
    </div>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">PriceUnit:</p> {{popDto.priceUnit}}
      </div>
    </div>
  </div>
  <div nz-row>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">Unit:</p>{{popDto.unit}}
      </div>
    </div>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">N.W.:</p>{{popDto.netWeight}}
      </div>
    </div>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">G.W.:</p>{{popDto.grossWeight}}
      </div>
    </div>
  </div>
  <div nz-row>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">Carton Quantity:</p> {{popDto.ctnQty}}
      </div>
    </div>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">CM:</p> {{popDto.cm}}
      </div>
    </div>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">Sale Status:</p>
        <nz-tag [nzColor]="'#87d068'" *ngIf="popDto.status === 'normal'">{{popDto.status}}</nz-tag>
        <nz-tag [nzColor]="'red '" *ngIf="popDto.status === 'disabled'">{{popDto.status}}</nz-tag>
      </div>
    </div>
  </div>
  <div nz-row>
    <div nz-col nzspan="24" >
      <a><img *ngIf="popDto.img" [src]="imgSuffix + popDto.img" class="avatar" (click)="showImage(imgSuffix + popDto.img)" style="max-width: 204px;max-height: 134px;"></a>
      <!--<img *ngIf="!popDto.img" alt="example" [src]="defaultUrl" style="max-width: 204px;max-height: 134px;"/>-->
    </div>
  </div>
  <nz-divider nzText="POP Detail Info" nzOrientation="left"></nz-divider>

  <nz-collapse [nzBordered]="false">
    <nz-collapse-panel *ngFor="let panel of panels;" [nzHeader]="panel.name" [nzActive]="panel.active"
                       [ngStyle]="panel.customStyle">
      <div nz-row>
        <div nz-col nzSpan="8">
          <div class="item-wrap">
            <p class="label">SKU : </p> {{panel.detail.sap}}
          </div>
        </div>
        <div nz-col nzSpan="8">
          <div class="item-wrap">
            <p class="label">SAP : </p> {{panel.detail.sap}}
          </div>
        </div>
        <div nz-col nzSpan="8">
          <div class="item-wrap">
            <p class="label">Sap Description : </p> {{panel.detail.sapDesc}}
          </div>
        </div>
      </div>
      <div nz-row>
        <div nz-col nzSpan="8">
          <div class="item-wrap">
            <strong><p class="label">Count : </p> {{panel.detail.count}}</strong>
          </div>
        </div>
        <div nz-col nzSpan="8">
          <div class="item-wrap">
            <p class="label">Description : </p> {{panel.detail.description}}
          </div>
        </div>
        <div nz-col nzSpan="8">
          <div class="item-wrap">
            <p class="label">Material : </p> {{panel.detail.material}}
          </div>
        </div>
      </div>
      <div nz-row>
        <div nz-col nzSpan="8">
          <div class="item-wrap">
            <p class="label">EXW : </p> {{panel.detail.priceUnit}}{{panel.detail.exw}}
          </div>
        </div>
        <div nz-col nzSpan="8">
          <div class="item-wrap">
            <p class="label">CIF : </p> {{panel.detail.priceUnit}}{{panel.detail.cif}}
          </div>
        </div>
        <div nz-col nzSpan="8">
          <div class="item-wrap">
            <p class="label">Price Unit : </p> {{panel.detail.priceUnit}}
          </div>
        </div>
      </div>
      <div nz-row>
        <div nz-col nzSpan="8">
          <div class="item-wrap">
            <p class="label">Qty : </p> {{panel.detail.qty}}
          </div>
        </div>
        <div nz-col nzSpan="8">
          <div class="item-wrap">
            <p class="label">Carton Quantity : </p> {{panel.detail.ctnQty}}
          </div>
        </div>
        <div nz-col nzSpan="8">
          <div class="item-wrap">
            <p class="label">Material : </p> {{panel.detail.material}}
          </div>
        </div>
      </div>
      <div nz-row>
        <div nz-col nzSpan="8">
          <div class="item-wrap">
            <p class="label">G.W. : </p> {{panel.detail.grossWeight}} KG
          </div>
        </div>
        <div nz-col nzSpan="8">
          <div class="item-wrap">
            <p class="label">N.W.</p> {{panel.detail.netWeight}} KG
          </div>
        </div>
      </div>
    </nz-collapse-panel>
  </nz-collapse>
</nz-drawer>
<nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible=false">
  <ng-template #modalContent>
    <img [src]="previewImage" [ngStyle]="{ 'width': '100%' }" />
  </ng-template>
</nz-modal>
